<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<title>客服</title>
		<!-- import CSS -->
		<link rel='stylesheet' href='../css/chat.css' />
		<style>
			.chat_box>.kh_top {
				height: 2rem;
				width: 100%;
				padding: 0.4rem;
				color: #123842;
				background-color: #ecedee;
				overflow: hidden;
			}


			.chat_box>.kh_top>.khlist {
				white-space: nowrap;
				overflow-x: scroll;
			}

			.chat_box>.kh_top .kh {
				margin-right: 12px;
				padding: 1px 0.4rem;

				border-radius: 4px;
			}

			.kh_unselected {
				color: #fff;
				background-color: #417133;
				cursor: pointer;
			}

			.kh_selected {
				color: #fff;
				background-color: #417133;
				cursor: default;
			}

			.chat_box>.chat_main {
				display: block;
				border: 1px solid #EBEEF5;
				/* border-radius: 2px; */
				min-width: 100%;
				height: -webkit-calc(100% - 9.2rem);
				height: -moz-calc(100% - 9.2rem);
				max-height: calc(100% - 9.2rem);
				overflow: auto;
				background-color: #efefef;
			}
		</style>
	</head>
	<body>
		<div id="chat">


			<div class="chat_box">
				<div class="kh_top">
					<div class="khlist">
						游客:
						<span class="kh" :class="{kh_selected:khid==cur_kh,kh_unselected:khid!=cur_kh }"
							@click="selectKh(khid)" v-for="(name,khid) in khlist">
							{{khid}}
						</span>
					</div>
				</div>
				<div class="chat_top">
					当前 > <span>{{cur_kh}}</span>
				</div>
				<div class="chat_main">

					<div class="row " v-for="it in msglist">
						<div class="head " :class="{ fright: it.isMe,  fleft: !it.isMe }">
							<span> {{it.name}}</span>
							<span> {{it.time}}</span>
						</div>

						<div class="msg " :class="{ right: it.isMe,  left: !it.isMe }">

							<p v-if="it.type==='105'"><img class="icon" :src="it.msg" /></p>
							<p v-else>{{it.msg}}</p>

						</div>
					</div>
				</div>
				<div class="chat_bottom">
					<textarea rows="2" cols="40" class="left" v-model="curmsg"></textarea>
					<div class="bts left">
						<div class="bt-txt bt" @click="sendTxt"><img src="../img/chat/12.png"></div>
						<div class="bt-icon bt">
							<img src="../img/chat/14.png">
							<div class="icons">
								<img v-for="n in 62" :src="iconurl(n)" @click="sendIcon(n)">

							</div>
						</div>
						<div class="uploadbt bt" onclick="javascript:uploadclk()"><img src="../img/chat/7.png"></div>
						<div class="soundbt bt"><img src="../img/chat/3.png"></div>
					</div>
				</div>

			</div>
		</div>
	</body>

</html>
<!-- import Vue before Element -->
<script src="../js/vue3.pro.js"></script>
<!-- import JavaScript -->

<script type="module">
	import Msgpg from '../hyl/base/net/Msgpg.js';
	import PGD from '../hyl/base/net/pgd.js';
	//import {_lstore} from '../hyl/base/db/store.js';
	import * as bfun from '../hyl/core/bfun.js';
	import * as fdate from '../hyl/core/fdate.js';
	import HylWS_KF from '../hyl/base/net/hyl.wskf.js';

	function ChatWinInstance() {
		document.querySelector(".chat_box .uploadbt").onclick = function() {
			getKh({
				head: '../img/chat/meactive.png',
				name: 'nn'
			})
		}
	}

	const defhead = '../img/chat/meactive.png';
	const me = {
		name: '',
		head: defhead,
		id: ''
	};
	const Binding = {
		data() {
			return {
				curmsg: "",
				_wsb: null,
				cur_kh: "a121", //当前客户id
				khlist: {
					"a121": {
						消息记录: [],
						有新的: false
					} //value=累计消息数				
				},
				msglist: [{
					type: PGD.M_文本,
					name: '小红',
					isMe: false,
					time: '20:04:05',
					msg: "大师傅1233333333333333332222222xzgfasdgasfgsaf234爱的方式给试试试试"
				}]
			}
		},
		computed: {
			// 计算属性的 getter

		},
		methods: {
			iconurl(n) {
				return '../img/face/' + n + '.gif';
			},
			getKh(kh) {
				if (!this.khlist.hasOwnProperty(kh)) {
					this.khlist[kh] = {
						消息记录: [],
						有新的: false
					}; //注册游客					
				}
				return this.khlist[kh];
			},
			delKh(kh) {
				if (kh in this.khlist)
					delete this.khlist[kh];
			},
			selectKh(kh) {
				if (kh && kh != '') {
					this.cur_kh = kh;
					this.msglist.length = this.khlist[kh].消息记录.length;
					this.msglist = Object.assign(this.msglist, this.khlist[kh].消息记录);
				}
			},
			loadHisMsg(his) {
				if (his && his.length > 0) {
					console.log(his);
					let hislist = JSON.parse(his);
					let ta = this;
					ta.msglist = [];
					for (let i = 0; i < hislist.length; i++) {
						let msgs = list[i];
						if (msgs["类型"] == 1) {
							let fsf = msgs["发送方"];
							let jsf = msgs["接收方"];
							let isme = (fsf == me["id"]);
							let ms = {
								name: fsf,
								isMe: isme,
								time: msgs["时间"],
								msg: msgs["字符串"],
								type: msgs["主题"]
							};
							let kh = isme ? jsf : fsf;
							ta.addMsgRec(kh, ms);
						}
					}
				}
			},
			//添加消息到显示区块
			addMsgRec(kh, omsg) {
				let ta = this;
				if (kh && kh != '') {
					ta.getKh(kh).消息记录.push(omsg);
					ta.getKh(kh).有新的 = true;
				}

				ta.msglist.push(omsg);
				if (ta.msglist.length > 50)
					ta.msglist.shift();
				let chat_main = document.querySelector(".chat_box .chat_main");
				setTimeout(() => {
					//vue 样式处理需要一段时间 , 所以 以下代码必须在vue处理完成后才能调用
					chat_main.scrollTop = chat_main.scrollHeight;
				}, 100)
			},
			//添加接收到的游客发送的消息
			addRecMsgpg(pg, obj) {
				console.log(pg)
				let ta = this;
				//系统指令
				if (pg.类型 == 0) {
					if (pg.主题 == PGD.S_登录) {
						let o = JSON.parse(pg.字符串)
						//	console.log(o)
						if (o.code == 1) {
							me.id = o.me.id;
							me.name = o.me.name;
							me.head = o.me.head || defhead;
							ta.loadHisMsg(o.his);
							console.log(me)
						} else {
							//登录失败
							console.log(o)
						}
					} else if (pg.主题 == PGD.S_退出) { //客户离线
						console.log(ta.khlist);
						let kh = pg.字符串;
						//ta.delKh(kh);
						ta.addMsgRec(kh, {
							name: "系统",
							isMe: false,
							time: pg.时间 || fdate.getNow(),
							msg: kh + "游客已经离线",
							type: pg.主题
						});
					}
				} else {
					//客服消息
					let kh = pg.发送方;
					let omsg = {
						name: kh,
						isMe: false,
						time: pg.时间 || fdate.getNow(),
						msg: "",
						type: pg.主题
					};
					if (pg.主题 == PGD.M_文本) {
						omsg.msg = pg.字符串;
					} else if (pg.主题 == PGD.M_音频) {
						omsg.msg = pg.字符串;
					} else if (pg.主题 == PGD.M_图标) {
						omsg.msg = '../img/face/' + pg.字符串 + '.gif';
					} else if (pg.主题 == PGD.M_图) {
						omsg.msg = pg.字符串;
					} else if (pg.主题 == PGD.M_文件) {
						omsg.msg = pg.字符串;
					}
					ta.addMsgRec(kh, omsg);
				}

			},
			//发送文本消息
			sendTxt() {
				const ta = this;
				let 接收方 = ta.cur_kh;
				let 消息 = ta.curmsg;
				let omsg = {
					name: me.id,
					isMe: true,
					time: fdate.getNow(),
					msg: 消息,
					type: PGD.M_文本
				};
				ta.addMsgRec(接收方, omsg);
				let pg = new Msgpg(me.id, 接收方, PGD.M_文本, 消息);
				ta._wskf.sendPg(pg);
			},
			sendImg() {

			},
			sendSound() {

			},
			//发送图标
			sendIcon(i) {
				const ta = this;
				let 接收方 = ta.cur_kh;
				let 消息 = i.toString();
				let omsg = {
					name: me.id,
					isMe: true,
					time: fdate.getNow(),
					msg: 消息,
					type: PGD.M_文本
				};
				ta.addMsgRec(接收方, omsg);
				let pg = new Msgpg(me.id, 接收方, PGD.M_图标, 消息);
				ta._wskf.sendPg(pg);
			},
			sendFile() {

			},
			conn() {
				const ta = this;
				ta._wskf = new HylWS_KF('ws://localhost:8080/sso/Kf/' + 2, this.addRecMsgpg, function(o, ws) {
					//定时更新游客状态
					//清空记录
					this.msglist = [];
				});
				ta._wskf.connect();
				// let k=[];
				// let kk2=Object.assign(k,[1,2,3]);
				// console.log(k ===kk2)
				// delete kk2[1]
				// kk2=Object.assign(k,[5,6]);
				// console.log(k ,kk2)
			},
		},
		//created() {},
		mounted() {
			//获取客服名单,接收事件,Open 事件
			//window.onload = function() {}
			ChatWinInstance();
			this.conn();
			console.log("初始化完毕")
		}
	}

	Vue.createApp(Binding).mount('#chat');
</script>
